{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>社区</title>
<style type="text/css">
	.mui-content{ padding-bottom: 50px;}
	.mui-grid-view.mui-grid-9:before{height: 1px;}
	.mui-slider-indicator{text-align: left;}
	.bbs-hot-list .mui-control-item1{width: 25% !important;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="bbs-search-box xw-border-bottom">
	<div class="mui-pull-left bbs-search">
		<a  id="sousuo" href="search"><i class="iconfont icon-sousuo"></i></a>
		<input class="bbs-search-input" type="text" name="search" value="" placeholder="输入关键字搜索" />
	</div>
	<a href="attention" class="bbs-my-interaction mui-pull-right">我的互动</a>
</div>
<div class="mui-content">
	<!--热门分类-->
	<div class="bbs-classify">
		<h4 class="mb-tit mui-clearfix">热门分类 <a class="mui-pull-right" href="bbsmore">查看更多</a></h4>
		<div class="bbs-classify-list">
			<ul class="mui-table-view mui-grid-view mui-grid-9 xw-border-top">
				{% for item in data.forumHots %}
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="bbsmore?typeid={{item.id}}">
						<span class="mui-icon">
							<img src="{{ctx.app.config.api.image}}/{{item.icon}}"/>
						</span>
					<div class="mui-media-body">{{item.name}}</div>
					</a>
				</li>
				{% endfor %}
			</ul>
		</div>
	</div>

	<!--精选问答-->
	<div class="bbs-hot-qa">
		<h4 class="mb-tit mui-clearfix">精选问答<a class="mui-pull-right" href="askquestionslist">查看更多</a></h4>
		<div class="bbs-hot-list">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll" >
					{% for item in data.forumAnswers %}
					<a class="mui-control-item1" href="askquestions?id={{item.postDTO.id}}">
						<img src="{{ctx.app.config.api.image}}/{{item.forumIcon}}"/>
						<h4 class="bbs-h4 mui-ellipsis">{{item.postDTO.title}}</h4>
						<div class="mui-ellipsis-2">
							<p class="bbs-anwser" style="    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;">
								<i class="bbs-icon bbs-icon1"></i>
								{%if item.postDTO.commPostDTO %}
								{{item.postDTO.commPostDTO.content}}
								{%else%}
								无内容
								{%endif%}
							</p>
						</div>
					</a>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<!--热门帖子-->
	<div class="bbs-hot-post mt-10">
		<div class="mb-post-list">
			{% for item in data.posts %}
			<!--三张图片样式-->
			{%if item.images.length > 1  %}
			<div class="mb-post-list-3 xw-border-bottom">
				<a href="postdetail?id={{item.id}}">
					<h4 class="mui-ellipsis-2">{{item.title}}</h4>
					<div class="mb-post-imgs">
						<ul class="mui-clearfix">
							{% for item2 in item.images %}
							<li><img src="{{ctx.app.config.api.image}}/{{item2}}"/></li>
							{%endfor%}
						</ul>
					</div>
				</a>
				<p class="bbs-operaton bbs-operaton1 mui-clearfix">
					<span class="mui-pull-left"><i class="iconfont icon-zan"></i>{{item.postLikeCount}}</span>
					<span class="mui-pull-left"><i class="iconfont icon-xiaoxi"></i>{{item.commentCount}}</span>
					<span class="mui-pull-right">来自逢考必过秘籍社区</span>
				</p>
			</div>
			{%else%}
			<div class="mb-post-list-1 xw-border-bottom">
				<a href="postdetail?id={{item.id}}">
					<h4 class="mui-ellipsis-2">{{item.title}}</h4>
					<img src="{{ctx.app.config.api.image}}/{{item.images}}"/>
				</a>
				<p class="bbs-operaton bbs-operaton1 mui-clearfix">
					<span class="mui-pull-left"><i class="iconfont icon-zan"></i>{{item.commentCount}}</span>
					<span class="mui-pull-left"><i class="iconfont icon-xiaoxi"></i>{{item.postLikeCount}}</span>
					<span class="mui-pull-right">来自逢考必过秘籍社区</span>
				</p>
			</div>
			{% endif %}
			{% endfor %}
			<!--一张图片样式-->


		</div>
	</div>
</div>

<!--底部tab-->
<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item1" href="../index">
		<span class="mui-icon iconfont icon-shouye"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item1 mui-active" href="">
		<span class="mui-icon iconfont icon-shequ"></span>
		<span class="mui-tab-label">社区</span>
	</a>
	<a class="mui-tab-item1" href="teaching">
		<span class="mui-icon iconfont icon-shujixinxi"></span>
		<span class="mui-tab-label">教务</span>
	</a>
	<a class="mui-tab-item1" href="news">
		<span class="mui-icon iconfont icon-xiaoxi"></span>
		<span class="mui-tab-label">消息</span>
	</a>
	<a class="mui-tab-item1" href="my">
		<span class="mui-icon iconfont icon-wode"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>

{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $('.iconfont').on('click',function(){
        let url = 'search?searchName=';
        let cont = $('input[name="search"]').val();
        if(cont == '')
		{
		    $("#sousuo").attr("href",url+"''");
		}else {
            $("#sousuo").attr("href",url+cont);
		}

    });
</script>
<!--flotdemo-->
{% endblock %}
